/*
Editor components styles
*/


.react-flow__node {
  z-index: 1000 !important;
}

.react-flow__node-annotation {
  z-index: 0 !important;
}
.react-flow__node-annotation.selected {
  z-index: 0 !important;
}

.react-flow__node.selected .handle-right,
.react-flow__node.selected .handle-left,
.react-flow__node.selected .handle-bottom {
  visibility: visible;
}

.react-flow__node.selected {
  border-color: 1px solid black;
}

.react-flow__node-toolbar {
  border-radius: 5px;
  box-shadow: var(--jp-elevation-z1);
  transition: 0.2s box-shadow;
}

.react-flow__node-toolbar div {
  margin: 0px;
  padding: 0px;
  height:16px;
}


.react-flow__node-toolbar button {
  border: 1px solid #eee;
  background: white;
  cursor: pointer;
  padding: 4px;
}


.react-flow__node-toolbar button:hover {
  background: #f5f5f6;
}

.react-flow__node-toolbar svg {
  color: #404040;
}

.react-flow__node-toolbar button:hover svg {
  color: #5F9B97;
  /* Change icon color on hover */
}

.react-flow__node-toolbar button:first-child {
  border-radius: 5px 0 0 5px;
  border-right: none;
}

.react-flow__node-toolbar button:last-child {
  border-radius: 0 5px 5px 0;
  border-left: none;
}

.component {
  position: relative; 
  background-color: #F2F4F7;
  width: 180px;
  min-height: 120px;
  padding: 8px;
  border-color: #F0F5F7;
  border-radius: 3px;
  color: #161616;
  box-shadow: var(--jp-elevation-z1);
  transition: box-shadow 0.2s;
}

.component::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px; /* Thickness of the border */
  background-color: var(--border-color, #778899); /* Default color */
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.component .handle-right {
  position: absolute;
  top: 54px;
  right: -6px;
  width: 8px;
  height: 25px;
  border-radius: 2px;
  background-color: #778899;
}

.component .handle-left {
  position: absolute;
  top: 54px;
  left: -6px;
  width: 8px;
  height: 25px;
  border-radius: 2px;
  background-color: #778899;
}

.component .second-handle-left {
  position: absolute;
  top: 114px;
  left: -6px;
  width: 8px;
  height: 25px;
  border-radius: 2px;
  background-color: #778899;
}

.component .handle-bottom {
  position: absolute;
  bottom: -6px;
  width: 25px;
  height: 6px;
  border-radius: 2px;
  background-color: #c6cfd6;
}

.component_label {
  display: block;
  margin-top: 0.25rem; /* equivalent to mt-1 */
  font-size: 0.75rem; /* equivalent to text-xs */
  font-weight: 500; /* equivalent to font-medium */
  color: black;
}

.component__header {
  padding: 2px 0;
  border-bottom: 1px solid #e2e8f0;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.component__body {
  padding-bottom: 3px;
  padding-top: 3px;
}

.component--default {
  background-color: #F2F4F7;
}

.component--success {
  box-shadow: 0 4px 8px rgba(0, 255, 0, 0.6); /* Green shadow */
}

.component__header--default {
  border-bottom-color: #e2e8f0;
}

/* Snowflake-specific styles */
.component--snowflake {
  background-color: #F2F4F7;
}

.component--snowflake {
  --border-color: #00ADEF;
}

.component--duckdb {
  --border-color: #EDDF00;
}

.component--duckdb::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px; /* Total height for two half-height layers */
  background: linear-gradient(
    to bottom,
    var(--border-color, #EDDF00) 50%, /* Top half color */
    black 50% /* Bottom half color */
  );
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.component--postgres {
  --border-color: #336691;
}


.component__header--snowflake {
  background-color: #F6F6F7;
}

.component__header--success {
  /* Optional: additional styles for header when success */
  border-bottom: 2px solid #00FF00; /* Example: green bottom border */
}


/* Components delete button */
.component .deletebutton:hover {
  cursor: pointer;
}

.placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  vertical-align: middle;
}

.placeholder svg {
  position: relative;
  top: 6px; /* Shift 10px below */
  height: 42px;
  width: 42px;
}

.ant-form-item {
  margin-bottom: 0px;
}

.ant-form-item-label {
  font-size: 16px;
  padding: 0 0 3px;
}

:global .ant-row .ant-form-item-row {
  margin-top: 5px;
}

/*
Components palette sidebar
*/

.canvas {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
}

.sidebar {
  border-right: 1px solid #eee;
  border-left: 1px solid #E0E0E0;
  font-size: 12px;
  background-color: white;
  position: relative;
  height: 100%;
  overflow-y: auto;
}

.sidebar .description {
  margin-right: 8px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.sidebar .draggable_component {
  height: 30px;
  padding: 4px;
  background-color: #F2F4F7;
  border: 1px solid var(--jp-border-color2);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: grab;
  line-height: 16px;
  border-radius: 3px;
}

.sidebar .ant-tree {
  font-size: 13px;
  font-family: var(--jp-ui-font-family);
}

.canvas .reactflow-wrapper {
  flex-grow: 1;
  height: 100%;
}

.canvas .selectall {
  margin-top: 10px;
}

@media screen and (min-width: 768px) {
  .canvas {
    display: flex;
    flex-direction: row;
  }

  .sidebar {
    top: 0;
    right: 0;
    height: 100%;
    /* width: 220px; */
    z-index: 10;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

.palette-component {
  position: relative;
  z-index: 300;
  /* Ensure the draggable elements are always on top */
  cursor: move;
  /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.palette-component-category {
  position: relative;
  z-index: 500;
  /* Ensure categories are on top but below components */
}

.sidebar .palette-component-category {
  font-weight: bold;
}

.sidebar .ant-tree-indent-unit {
  width: 8px;
}

/*
Edges 
*/

.temp .react-flow__edge-path {
  stroke: #bbb;
  stroke-dasharray: 5 5;
}


.edgebutton {
  width: 20px;
  height: 20px;
  background-color: #F2F4F7;
  border: 1px solid white;
  cursor: pointer;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1; /* equivalent to leading-none */
}

.edgebutton:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1); /* equivalent to shadow-lg */
}


/*
Form inputs
*/

input:checked+label {
  border-color: black;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.component_select__input {
  outline: none;
}

.component_select__input:focus {
  box-shadow: none;
  border: none;
}

.form-indicator svg {
  display: block;
}


/* Single Input Selects */

.component_select__single-value {
  font-size: 1rem;
  line-height: 1.5;
}

.component_select__option {
  font-size: 1rem;
  line-height: 1.5;
}

.component_select__indicator-separator {
  height: 1.25rem;
}

/* Datagrid */

.lm-DataGrid {
  min-width: 64px;
  min-height: 64px;
  border: 1px solid #F0F0F0 !important;
  margin: 5px;
}

.lm-DataGrid-scrollBar {
  /* Reset custom scrollbar styles */
  width: auto;
  height: auto;
  position: static; /* or remove position if not necessary */
  overflow: auto;   /* Allow browser to handle scrollbar */
}

.lm-ScrollBar-thumb {
  /* Remove custom thumb styles to use browser default */
  transform: none;
  top: auto;
  height: auto;
}

.lm-ScrollBar-track,
.lm-ScrollBar-button {
  display: none; /* Hide custom buttons and tracks */
}